.chat-container {
  height: 200px;
}

.chat-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.input-field {
  flex: 1;
}

.submit-button {
  flex: 1;
  width: 40px;
  height: 40px;
}

.clear-button {
  flex: 1;
  width: 40px;
  height: 40px;
}

/* Override @chatscope default styles */
.cs-message--outgoing .cs-message__content {
  background-color: #fff8e1 !important;
  font-size: 11pt;
}

.cs-message--outgoing .cs-message__avatar {
  margin: 0 0 0 4px;
}

.cs-message--incoming .cs-message__content {
  background-color: #ffd54f !important;
  font-size: 11pt;
}

.cs-message--incoming .cs-message__avatar {
  margin: 0 4px 0 0;
}

.ps__rail-y {
  background-color: #fff8e1 !important;  /* scrollbar background color */
}

.ps__thumb-y {
  background-color: #ffd54f !important;  /* scrollbar color */
}

.cs-typing-indicator__text {
  color: #ffb300 !important;
}

.cs-typing-indicator__dot {
  background-color: #ffb300 !important;
}

.cs-avatar.cs-avatar--md {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}
